<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ReadCat - 开源免费小说阅读器</title>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📚</text></svg>">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            overflow-x: hidden;
        }

        .header {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 15px 0;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .nav {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }

        .logo {
            display: flex;
            align-items: center;
            font-size: 24px;
            font-weight: bold;
            color: #667eea;
        }

        .logo-icon {
            font-size: 32px;
            margin-right: 10px;
        }

        .nav-menu {
            display: flex;
            list-style: none;
            gap: 30px;
        }

        .nav-item {
            cursor: pointer;
            padding: 8px 16px;
            border-radius: 20px;
            transition: all 0.3s ease;
            color: #666;
            font-weight: 500;
        }

        .nav-item:hover, .nav-item.active {
            background: #667eea;
            color: white;
            transform: translateY(-2px);
        }

        .main-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        .hero-section {
            text-align: center;
            margin-bottom: 60px;
            color: white;
        }

        .hero-title {
            font-size: 3.5em;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .hero-subtitle {
            font-size: 1.3em;
            opacity: 0.9;
            margin-bottom: 30px;
        }

        .action-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 40px;
        }

        .btn {
            padding: 15px 30px;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background: linear-gradient(45deg, #ff6b6b, #ee5a24);
            color: white;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
        }

        .content-section {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 40px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }

        .section-title {
            font-size: 2em;
            margin-bottom: 30px;
            color: #333;
            text-align: center;
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            border-radius: 2px;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .feature-card {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            transition: all 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        }

        .feature-icon {
            font-size: 3em;
            margin-bottom: 20px;
            display: block;
        }

        .feature-title {
            font-size: 1.3em;
            font-weight: 600;
            margin-bottom: 15px;
            color: #333;
        }

        .feature-desc {
            color: #666;
            line-height: 1.6;
        }

        .book-shelf {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .book-item {
            background: white;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .book-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .book-cover {
            width: 100%;
            height: 200px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 8px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3em;
            color: white;
        }

        .book-title {
            font-weight: 600;
            margin-bottom: 8px;
            color: #333;
        }

        .book-author {
            color: #666;
            font-size: 0.9em;
        }

        .reading-area {
            background: white;
            border-radius: 15px;
            padding: 40px;
            margin-top: 30px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            min-height: 500px;
        }

        .reading-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #f0f0f0;
        }

        .reading-title {
            font-size: 1.5em;
            font-weight: 600;
            color: #333;
        }

        .reading-progress {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .progress-bar {
            width: 200px;
            height: 6px;
            background: #f0f0f0;
            border-radius: 3px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(45deg, #667eea, #764ba2);
            width: 35%;
            transition: width 0.3s ease;
        }

        .reading-content {
            line-height: 2;
            font-size: 1.1em;
            color: #444;
            text-align: justify;
        }

        .footer {
            background: rgba(0, 0, 0, 0.8);
            color: white;
            text-align: center;
            padding: 30px 0;
            margin-top: 60px;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 2000;
            backdrop-filter: blur(5px);
        }

        .modal-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 40px;
            border-radius: 20px;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        .close-btn {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 24px;
            cursor: pointer;
            color: #999;
        }

        .close-btn:hover {
            color: #333;
        }

        /* 设置页面样式 */
        .settings-group {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 25px;
            margin: 20px 0;
            border: 1px solid #e9ecef;
        }

        .settings-group-title {
            font-size: 1.3em;
            font-weight: 600;
            margin-bottom: 20px;
            color: #333;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }

        .setting-item {
            margin: 15px 0;
            padding: 10px 0;
        }

        .setting-item label {
            display: block;
            font-weight: 500;
            margin-bottom: 8px;
            color: #555;
        }

        .radio-group {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 10px;
        }

        .radio-group label {
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: normal;
            margin-bottom: 0;
        }

        .theme-options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        .theme-option {
            text-align: center;
            padding: 15px;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .theme-option:hover {
            border-color: #667eea;
            transform: translateY(-2px);
        }

        .theme-option.active {
            border-color: #667eea;
            background: rgba(102, 126, 234, 0.1);
        }

        .theme-preview {
            width: 60px;
            height: 40px;
            border-radius: 8px;
            margin: 0 auto 10px;
            border: 1px solid #ddd;
        }

        .default-theme {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .dark-theme {
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
        }

        .eye-care-theme {
            background: linear-gradient(135deg, #c7e9b4 0%, #b7e4c7 100%);
        }

        .classic-theme {
            background: linear-gradient(135deg, #f5f5dc 0%, #faf0e6 100%);
        }

        /* 主题样式 */
        body.dark-theme {
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
            color: #ecf0f1;
        }

        body.dark-theme .header {
            background: rgba(44, 62, 80, 0.95);
        }

        body.dark-theme .content-section {
            background: rgba(52, 73, 94, 0.95);
            color: #ecf0f1;
        }

        body.dark-theme .settings-group {
            background: rgba(44, 62, 80, 0.8);
            border-color: #34495e;
        }

        body.dark-theme .reading-area {
            background: #2c3e50;
            color: #ecf0f1;
        }

        body.eye-care-theme {
            background: linear-gradient(135deg, #c7e9b4 0%, #b7e4c7 100%);
            color: #2d5016;
        }

        body.eye-care-theme .header {
            background: rgba(199, 233, 180, 0.95);
        }

        body.eye-care-theme .content-section {
            background: rgba(183, 228, 199, 0.95);
            color: #2d5016;
        }

        body.eye-care-theme .reading-area {
            background: #f0f8e8;
            color: #2d5016;
        }

        body.classic-theme {
            background: linear-gradient(135deg, #f5f5dc 0%, #faf0e6 100%);
            color: #8b4513;
        }

        body.classic-theme .header {
            background: rgba(245, 245, 220, 0.95);
        }

        body.classic-theme .content-section {
            background: rgba(250, 240, 230, 0.95);
            color: #8b4513;
        }

        body.classic-theme .reading-area {
            background: #fdf5e6;
            color: #8b4513;
        }

        @media (max-width: 768px) {
            .nav-menu {
                display: none;
            }
            
            .hero-title {
                font-size: 2.5em;
            }
            
            .action-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .features-grid {
                grid-template-columns: 1fr;
            }

            .theme-options {
                grid-template-columns: repeat(2, 1fr);
            }

            .radio-group {
                flex-direction: column;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <nav class="nav">
            <div class="logo">
                <span class="logo-icon">📚</span>
                ReadCat
            </div>
            <ul class="nav-menu">
                <li class="nav-item active" data-section="home">首页</li>
                <li class="nav-item" data-section="library">书库</li>
                <li class="nav-item" data-section="reading">阅读</li>
                <li class="nav-item" data-section="settings">设置</li>
                <li class="nav-item" data-section="about">关于</li>
            </ul>
        </nav>
    </header>

    <main class="main-container">
        <!-- 首页部分 -->
        <section id="home" class="page-section">
            <div class="hero-section">
                <h1 class="hero-title">📖 ReadCat</h1>
                <p class="hero-subtitle">开源免费的小说阅读器，让阅读更美好</p>
                <div class="action-buttons">
                    <button class="btn btn-primary" onclick="showSection('library')">
                        📚 开始阅读
                    </button>
                    <button class="btn btn-secondary" onclick="openModal('import-modal')">
                        📁 导入书籍
                    </button>
                </div>
            </div>

            <div class="content-section">
                <h2 class="section-title">✨ 核心功能</h2>
                <div class="features-grid">
                    <div class="feature-card">
                        <span class="feature-icon">📚</span>
                        <h3 class="feature-title">多格式支持</h3>
                        <p class="feature-desc">支持 TXT、EPUB、PDF 等多种电子书格式，满足不同阅读需求</p>
                    </div>
                    <div class="feature-card">
                        <span class="feature-icon">🎨</span>
                        <h3 class="feature-title">个性化定制</h3>
                        <p class="feature-desc">自定义字体、背景、行距等阅读参数，打造专属阅读体验</p>
                    </div>
                    <div class="feature-card">
                        <span class="feature-icon">☁️</span>
                        <h3 class="feature-title">云端同步</h3>
                        <p class="feature-desc">阅读进度云端同步，多设备无缝切换，随时随地继续阅读</p>
                    </div>
                    <div class="feature-card">
                        <span class="feature-icon">🔍</span>
                        <h3 class="feature-title">智能搜索</h3>
                        <p class="feature-desc">全文搜索、书签管理、笔记标注，让知识管理更高效</p>
                    </div>
                    <div class="feature-card">
                        <span class="feature-icon">🌙</span>
                        <h3 class="feature-title">护眼模式</h3>
                        <p class="feature-desc">夜间模式、护眼色彩，长时间阅读也不疲劳</p>
                    </div>
                    <div class="feature-card">
                        <span class="feature-icon">🚀</span>
                        <h3 class="feature-title">高性能</h3>
                        <p class="feature-desc">基于 Electron + Vue3，流畅的阅读体验，快速响应</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 书库部分 -->
        <section id="library" class="page-section" style="display: none;">
            <div class="content-section">
                <h2 class="section-title">📚 我的书库</h2>
                <div class="action-buttons">
                    <button class="btn btn-primary" onclick="openModal('import-modal')">
                        ➕ 添加书籍
                    </button>
                    <button class="btn btn-secondary" onclick="refreshLibrary()">
                        🔄 刷新书库
                    </button>
                    <a href="book-resources.html" class="btn btn-secondary" target="_blank">
                        🌐 免费资源
                    </a>
                </div>
=======
                <div class="book-shelf" id="bookShelf">
                    <!-- 示例书籍 -->
                    <div class="book-item" onclick="openBook('三体')">
                        <div class="book-cover">🌌</div>
                        <div class="book-title">三体</div>
                        <div class="book-author">刘慈欣</div>
                    </div>
                    <div class="book-item" onclick="openBook('红楼梦')">
                        <div class="book-cover">🏮</div>
                        <div class="book-title">红楼梦</div>
                        <div class="book-author">曹雪芹</div>
                    </div>
                    <div class="book-item" onclick="openBook('西游记')">
                        <div class="book-cover">🐒</div>
                        <div class="book-title">西游记</div>
                        <div class="book-author">吴承恩</div>
                    </div>
                    <div class="book-item" onclick="openBook('水浒传')">
                        <div class="book-cover">⚔️</div>
                        <div class="book-title">水浒传</div>
                        <div class="book-author">施耐庵</div>
                    </div>
                    <div class="book-item" onclick="openBook('三国演义')">
                        <div class="book-cover">🏛️</div>
                        <div class="book-title">三国演义</div>
                        <div class="book-author">罗贯中</div>
                    </div>
                    <div class="book-item" onclick="openBook('平凡的世界')">
                        <div class="book-cover">🌾</div>
                        <div class="book-title">平凡的世界</div>
                        <div class="book-author">路遥</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 阅读部分 -->
        <section id="reading" class="page-section" style="display: none;">
            <div class="content-section">
                <h2 class="section-title">📖 正在阅读</h2>
                <div class="reading-area">
                    <div class="reading-controls">
                        <div class="reading-title" id="currentBookTitle">请选择一本书开始阅读</div>
                        <div class="reading-progress">
                            <span>35%</span>
                            <div class="progress-bar">
                                <div class="progress-fill"></div>
                            </div>
                            <span>第 12/34 章</span>
                        </div>
                    </div>
                    <div class="reading-content" id="readingContent">
                        <p>欢迎使用 ReadCat 阅读器！</p>
                        <p>这是一个功能强大的开源电子书阅读应用，支持多种格式的电子书阅读。</p>
                        <p>您可以从书库中选择一本书开始阅读，或者导入新的电子书文件。</p>
                        <p>ReadCat 提供了丰富的阅读功能：</p>
                        <ul>
                            <li>🎨 个性化阅读界面设置</li>
                            <li>📝 笔记和书签功能</li>
                            <li>🔍 全文搜索功能</li>
                            <li>☁️ 阅读进度云端同步</li>
                            <li>🌙 夜间模式和护眼设置</li>
                        </ul>
                        <p>开始您的阅读之旅吧！</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 设置部分 -->
        <section id="settings" class="page-section" style="display: none;">
            <div class="content-section">
                <h2 class="section-title">⚙️ 阅读设置</h2>
                
                <!-- 主题设置 -->
                <div class="settings-group">
                    <h3 class="settings-group-title">🎨 界面主题</h3>
                    <div class="theme-options">
                        <div class="theme-option active" data-theme="default" onclick="changeTheme('default')">
                            <div class="theme-preview default-theme"></div>
                            <span>默认主题</span>
                        </div>
                        <div class="theme-option" data-theme="dark" onclick="changeTheme('dark')">
                            <div class="theme-preview dark-theme"></div>
                            <span>夜间模式</span>
                        </div>
                        <div class="theme-option" data-theme="eye-care" onclick="changeTheme('eye-care')">
                            <div class="theme-preview eye-care-theme"></div>
                            <span>护眼模式</span>
                        </div>
                        <div class="theme-option" data-theme="classic" onclick="changeTheme('classic')">
                            <div class="theme-preview classic-theme"></div>
                            <span>经典模式</span>
                        </div>
                    </div>
                </div>

                <!-- 字体设置 -->
                <div class="settings-group">
                    <h3 class="settings-group-title">📝 字体设置</h3>
                    <div class="setting-item">
                        <label>字体大小: <span id="fontSizeValue">16px</span></label>
                        <input type="range" id="fontSizeSlider" min="12" max="28" value="16" 
                               oninput="changeFontSize(this.value)" style="width: 100%; margin: 10px 0;">
                    </div>
                    <div class="setting-item">
                        <label>行间距: <span id="lineHeightValue">1.6</span></label>
                        <input type="range" id="lineHeightSlider" min="1" max="3" step="0.1" value="1.6" 
                               oninput="changeLineHeight(this.value)" style="width: 100%; margin: 10px 0;">
                    </div>
                    <div class="setting-item">
                        <label>字体族:</label>
                        <select id="fontFamilySelect" onchange="changeFontFamily(this.value)" 
                                style="width: 100%; padding: 8px; margin: 10px 0; border-radius: 5px; border: 1px solid #ddd;">
                            <option value="Microsoft YaHei">微软雅黑</option>
                            <option value="SimSun">宋体</option>
                            <option value="KaiTi">楷体</option>
                            <option value="SimHei">黑体</option>
                            <option value="Arial">Arial</option>
                        </select>
                    </div>
                </div>

                <!-- 翻页设置 -->
                <div class="settings-group">
                    <h3 class="settings-group-title">📖 翻页设置</h3>
                    <div class="setting-item">
                        <label>翻页方式:</label>
                        <div class="radio-group">
                            <label><input type="radio" name="pageMode" value="click" checked onchange="changePageMode(this.value)"> 点击翻页</label>
                            <label><input type="radio" name="pageMode" value="scroll" onchange="changePageMode(this.value)"> 滚动翻页</label>
                            <label><input type="radio" name="pageMode" value="key" onchange="changePageMode(this.value)"> 按键翻页</label>
                        </div>
                    </div>
                    <div class="setting-item">
                        <label>翻页动画:</label>
                        <select id="pageAnimationSelect" onchange="changePageAnimation(this.value)"
                                style="width: 100%; padding: 8px; margin: 10px 0; border-radius: 5px; border: 1px solid #ddd;">
                            <option value="slide">滑动效果</option>
                            <option value="fade">淡入淡出</option>
                            <option value="none">无动画</option>
                        </select>
                    </div>
                    <div class="setting-item">
                        <label>
                            <input type="checkbox" id="autoPageTurn" onchange="toggleAutoPageTurn(this.checked)"> 
                            自动翻页 (<span id="autoPageSpeed">5</span>秒/页)
                        </label>
                        <input type="range" id="autoPageSpeedSlider" min="1" max="10" value="5" 
                               oninput="changeAutoPageSpeed(this.value)" style="width: 100%; margin: 10px 0;">
                    </div>
                </div>

                <!-- 阅读设置 -->
                <div class="settings-group">
                    <h3 class="settings-group-title">👁️ 阅读体验</h3>
                    <div class="setting-item">
                        <label>
                            <input type="checkbox" id="fullScreen" onchange="toggleFullScreen(this.checked)"> 
                            全屏阅读模式
                        </label>
                    </div>
                    <div class="setting-item">
                        <label>
                            <input type="checkbox" id="hideInterface" onchange="toggleHideInterface(this.checked)"> 
                            阅读时隐藏界面
                        </label>
                    </div>
                    <div class="setting-item">
                        <label>
                            <input type="checkbox" id="readingProgress" checked onchange="toggleReadingProgress(this.checked)"> 
                            显示阅读进度
                        </label>
                    </div>
                </div>

                <!-- 同步设置 -->
                <div class="settings-group">
                    <h3 class="settings-group-title">☁️ 同步设置</h3>
                    <div class="setting-item">
                        <label>
                            <input type="checkbox" id="autoSync" checked onchange="toggleAutoSync(this.checked)"> 
                            自动同步阅读进度
                        </label>
                    </div>
                    <div class="setting-item">
                        <label>
                            <input type="checkbox" id="syncBookmarks" checked onchange="toggleSyncBookmarks(this.checked)"> 
                            同步书签和笔记
                        </label>
                    </div>
                    <div class="setting-item">
                        <button class="btn btn-secondary" onclick="manualSync()" style="width: 100%;">
                            🔄 立即同步
                        </button>
                    </div>
                </div>

                <!-- 重置设置 -->
                <div class="settings-group">
                    <h3 class="settings-group-title">🔧 其他设置</h3>
                    <div class="setting-item">
                        <button class="btn btn-secondary" onclick="exportSettings()" style="width: 100%; margin: 5px 0;">
                            📤 导出设置
                        </button>
                        <button class="btn btn-secondary" onclick="importSettings()" style="width: 100%; margin: 5px 0;">
                            📥 导入设置
                        </button>
                        <button class="btn btn-primary" onclick="resetSettings()" style="width: 100%; margin: 5px 0;">
                            🔄 重置为默认设置
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 关于部分 -->
        <section id="about" class="page-section" style="display: none;">
            <div class="content-section">
                <h2 class="section-title">ℹ️ 关于 ReadCat</h2>
                <div style="text-align: center; margin: 40px 0;">
                    <div style="font-size: 4em; margin-bottom: 20px;">📚</div>
                    <h3 style="font-size: 2em; margin-bottom: 20px; color: #667eea;">ReadCat v2.0.0</h3>
                    <p style="font-size: 1.2em; color: #666; margin-bottom: 30px;">开源免费的小说阅读器</p>
                </div>
                
                <div class="features-grid">
                    <div class="feature-card">
                        <span class="feature-icon">💻</span>
                        <h3 class="feature-title">技术栈</h3>
                        <p class="feature-desc">
                            • Electron + Vue 3<br>
                            • TypeScript<br>
                            • Vite 构建工具<br>
                            • Element Plus UI
                        </p>
                    </div>
                    <div class="feature-card">
                        <span class="feature-icon">📄</span>
                        <h3 class="feature-title">开源协议</h3>
                        <p class="feature-desc">
                            MIT License<br>
                            自由使用、修改和分发
                        </p>
                    </div>
                    <div class="feature-card">
                        <span class="feature-icon">🔗</span>
                        <h3 class="feature-title">项目链接</h3>
                        <p class="feature-desc">
                            <a href="#" style="color: #667eea;">GitHub 仓库</a><br>
                            <a href="#" style="color: #667eea;">问题反馈</a><br>
                            <a href="#" style="color: #667eea;">使用文档</a>
                        </p>
                    </div>
                    <div class="feature-card">
                        <span class="feature-icon">👥</span>
                        <h3 class="feature-title">贡献者</h3>
                        <p class="feature-desc">
                            感谢所有为 ReadCat<br>
                            项目做出贡献的开发者
                        </p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 导入书籍模态框 -->
    <div id="import-modal" class="modal">
        <div class="modal-content">
            <span class="close-btn" onclick="closeModal('import-modal')">&times;</span>
            <h3 style="margin-bottom: 20px; color: #333;">📁 导入电子书</h3>
            <div style="border: 2px dashed #ddd; padding: 40px; text-align: center; border-radius: 10px; margin: 20px 0;">
                <div style="font-size: 3em; margin-bottom: 15px;">📚</div>
                <p>拖拽文件到此处或点击选择文件</p>
                <p style="color: #666; font-size: 0.9em; margin-top: 10px;">支持 TXT、EPUB、PDF 格式</p>
                <input type="file" accept=".txt,.epub,.pdf" style="margin-top: 20px;" onchange="handleFileImport(this)">
            </div>
            <div style="text-align: center; margin-top: 20px;">
                <button class="btn btn-primary" onclick="closeModal('import-modal')">确定</button>
            </div>
        </div>
    </div>

    <footer class="footer">
        <p>&copy; 2024 ReadCat - 开源免费的小说阅读器 | Made with ❤️</p>
    </footer>

    <script>
        // 页面切换功能
        function showSection(sectionId) {
            // 隐藏所有页面
            document.querySelectorAll('.page-section').forEach(section => {
                section.style.display = 'none';
            });
            
            // 显示目标页面
            document.getElementById(sectionId).style.display = 'block';
            
            // 更新导航状态
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active');
            });
            document.querySelector(`[data-section="${sectionId}"]`).classList.add('active');
        }

        // 导航点击事件
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', () => {
                const section = item.getAttribute('data-section');
                showSection(section);
            });
        });

        // 模态框功能
        function openModal(modalId) {
            document.getElementById(modalId).style.display = 'block';
        }

        function closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
        }

        // 打开书籍
        function openBook(bookTitle) {
            document.getElementById('currentBookTitle').textContent = bookTitle;
            document.getElementById('readingContent').innerHTML = `
                <h3>${bookTitle}</h3>
                <p>这是《${bookTitle}》的内容预览...</p>
                <p>在这里您可以阅读完整的书籍内容，使用各种阅读功能，如调整字体大小、添加书签、做笔记等。</p>
                <p>ReadCat 提供了舒适的阅读体验，让您沉浸在书籍的世界中。</p>
                <p>您可以使用键盘快捷键或界面按钮来翻页、调整设置等。</p>
            `;
            showSection('reading');
        }

        // 刷新书库
        // 书籍数据管理
        let userBooks = [];

        // 加载用户书籍
        function loadUserBooks() {
            const saved = localStorage.getItem('readcat-user-books');
            if (saved) {
                try {
                    userBooks = JSON.parse(saved);
                } catch (e) {
                    userBooks = [];
                }
            }
            renderBookShelf();
        }

        // 保存用户书籍
        function saveUserBooks() {
            localStorage.setItem('readcat-user-books', JSON.stringify(userBooks));
        }

        // 添加书籍到书库
        function addBookToLibrary(book) {
            const exists = userBooks.find(b => b.title === book.title && b.author === book.author);
            if (exists) {
                showNotification('该书籍已存在于书库中', 'warning');
                return false;
            }

            userBooks.push({
                id: 'user_' + Date.now(),
                title: book.title,
                author: book.author,
                content: book.content,
                cover: book.cover || '📖',
                addedDate: new Date().toISOString(),
                readingProgress: 0
            });

            saveUserBooks();
            renderBookShelf();
            showNotification(`《${book.title}》已添加到书库`, 'success');
            return true;
        }

        // 渲染书架
        function renderBookShelf() {
            const bookShelf = document.getElementById('bookShelf');
            
            const defaultBooks = [
                { title: '三体', author: '刘慈欣', cover: '🌌' },
                { title: '红楼梦', author: '曹雪芹', cover: '🏮' },
                { title: '西游记', author: '吴承恩', cover: '🐒' },
                { title: '水浒传', author: '施耐庵', cover: '⚔️' },
                { title: '三国演义', author: '罗贯中', cover: '🏛️' },
                { title: '平凡的世界', author: '路遥', cover: '🌾' }
            ];

            const allBooks = [...defaultBooks, ...userBooks];

            bookShelf.innerHTML = allBooks.map(book => `
                <div class="book-item" onclick="openBook('${book.title}', '${book.author}', ${book.content ? `'${book.id}'` : 'null'})">
                    <div class="book-cover">${book.cover}</div>
                    <div class="book-title">${book.title}</div>
                    <div class="book-author">${book.author}</div>
                    ${book.id && book.id.startsWith('user_') ? '<div class="book-badge">已下载</div>' : ''}
                </div>
            `).join('');
        }

        function refreshLibrary() {
            loadUserBooks();
            showNotification('书库已刷新！', 'success');
        }

        // 文件导入处理
        function handleFileImport(input) {
            const file = input.files[0];
            if (file) {
                alert(`已选择文件: ${file.name}\n文件大小: ${(file.size / 1024 / 1024).toFixed(2)} MB`);
                closeModal('import-modal');
            }
        }

        // 点击模态框背景关闭
        window.onclick = function(event) {
            if (event.target.classList.contains('modal')) {
                event.target.style.display = 'none';
            }
        }

        // 设置功能实现
        let currentSettings = {
            theme: 'default',
            fontSize: 16,
            lineHeight: 1.6,
            fontFamily: 'Microsoft YaHei',
            pageMode: 'click',
            pageAnimation: 'slide',
            autoPageTurn: false,
            autoPageSpeed: 5,
            fullScreen: false,
            hideInterface: false,
            readingProgress: true,
            autoSync: true,
            syncBookmarks: true
        };

        // 主题切换功能
        function changeTheme(theme) {
            // 移除所有主题类
            document.body.classList.remove('dark-theme', 'eye-care-theme', 'classic-theme');
            
            // 应用新主题
            if (theme !== 'default') {
                document.body.classList.add(theme + '-theme');
            }
            
            // 更新主题选择状态
            document.querySelectorAll('.theme-option').forEach(option => {
                option.classList.remove('active');
            });
            document.querySelector(`[data-theme="${theme}"]`).classList.add('active');
            
            currentSettings.theme = theme;
            saveSettings();
            
            console.log(`🎨 主题已切换为: ${theme}`);
            showNotification(`主题已切换为: ${getThemeName(theme)}`);
        }

        function getThemeName(theme) {
            const names = {
                'default': '默认主题',
                'dark': '夜间模式',
                'eye-care': '护眼模式',
                'classic': '经典模式'
            };
            return names[theme] || theme;
        }

        // 字体大小调整
        function changeFontSize(size) {
            document.getElementById('fontSizeValue').textContent = size + 'px';
            document.getElementById('readingContent').style.fontSize = size + 'px';
            currentSettings.fontSize = parseInt(size);
            saveSettings();
            console.log(`📝 字体大小已调整为: ${size}px`);
        }

        // 行间距调整
        function changeLineHeight(height) {
            document.getElementById('lineHeightValue').textContent = height;
            document.getElementById('readingContent').style.lineHeight = height;
            currentSettings.lineHeight = parseFloat(height);
            saveSettings();
            console.log(`📏 行间距已调整为: ${height}`);
        }

        // 字体族切换
        function changeFontFamily(family) {
            document.getElementById('readingContent').style.fontFamily = family;
            currentSettings.fontFamily = family;
            saveSettings();
            console.log(`🔤 字体已切换为: ${family}`);
            showNotification(`字体已切换为: ${family}`);
        }

        // 翻页方式设置
        function changePageMode(mode) {
            currentSettings.pageMode = mode;
            saveSettings();
            
            const modeNames = {
                'click': '点击翻页',
                'scroll': '滚动翻页',
                'key': '按键翻页'
            };
            
            console.log(`📖 翻页方式已设置为: ${modeNames[mode]}`);
            showNotification(`翻页方式: ${modeNames[mode]}`);
        }

        // 翻页动画设置
        function changePageAnimation(animation) {
            currentSettings.pageAnimation = animation;
            saveSettings();
            
            const animationNames = {
                'slide': '滑动效果',
                'fade': '淡入淡出',
                'none': '无动画'
            };
            
            console.log(`🎬 翻页动画已设置为: ${animationNames[animation]}`);
            showNotification(`翻页动画: ${animationNames[animation]}`);
        }

        // 自动翻页设置
        function toggleAutoPageTurn(enabled) {
            currentSettings.autoPageTurn = enabled;
            document.getElementById('autoPageSpeedSlider').disabled = !enabled;
            saveSettings();
            
            if (enabled) {
                console.log(`⏰ 自动翻页已启用，速度: ${currentSettings.autoPageSpeed}秒/页`);
                showNotification(`自动翻页已启用 (${currentSettings.autoPageSpeed}秒/页)`);
            } else {
                console.log('⏸️ 自动翻页已禁用');
                showNotification('自动翻页已禁用');
            }
        }

        // 自动翻页速度调整
        function changeAutoPageSpeed(speed) {
            document.getElementById('autoPageSpeed').textContent = speed;
            currentSettings.autoPageSpeed = parseInt(speed);
            saveSettings();
            console.log(`⏱️ 自动翻页速度已调整为: ${speed}秒/页`);
        }

        // 全屏模式切换
        function toggleFullScreen(enabled) {
            currentSettings.fullScreen = enabled;
            saveSettings();
            
            if (enabled) {
                if (document.documentElement.requestFullscreen) {
                    document.documentElement.requestFullscreen();
                }
                console.log('🖥️ 全屏模式已启用');
                showNotification('全屏模式已启用');
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
                console.log('🪟 全屏模式已禁用');
                showNotification('全屏模式已禁用');
            }
        }

        // 隐藏界面切换
        function toggleHideInterface(enabled) {
            currentSettings.hideInterface = enabled;
            const header = document.querySelector('.header');
            
            if (enabled) {
                header.style.display = 'none';
                console.log('👁️ 阅读时隐藏界面已启用');
                showNotification('阅读时将隐藏界面');
            } else {
                header.style.display = 'block';
                console.log('👁️ 阅读时隐藏界面已禁用');
                showNotification('界面将保持显示');
            }
            
            saveSettings();
        }

        // 阅读进度显示切换
        function toggleReadingProgress(enabled) {
            currentSettings.readingProgress = enabled;
            const progressBar = document.querySelector('.reading-progress');
            
            if (progressBar) {
                progressBar.style.display = enabled ? 'flex' : 'none';
            }
            
            saveSettings();
            console.log(`📊 阅读进度显示已${enabled ? '启用' : '禁用'}`);
            showNotification(`阅读进度显示已${enabled ? '启用' : '禁用'}`);
        }

        // 自动同步切换
        function toggleAutoSync(enabled) {
            currentSettings.autoSync = enabled;
            saveSettings();
            console.log(`☁️ 自动同步已${enabled ? '启用' : '禁用'}`);
            showNotification(`自动同步已${enabled ? '启用' : '禁用'}`);
        }

        // 同步书签切换
        function toggleSyncBookmarks(enabled) {
            currentSettings.syncBookmarks = enabled;
            saveSettings();
            console.log(`🔖 书签同步已${enabled ? '启用' : '禁用'}`);
            showNotification(`书签同步已${enabled ? '启用' : '禁用'}`);
        }

        // 手动同步
        function manualSync() {
            showNotification('正在同步数据...', 'info');
            
            // 模拟同步过程
            setTimeout(() => {
                showNotification('同步完成！', 'success');
                console.log('☁️ 手动同步完成');
            }, 2000);
        }

        // 导出设置
        function exportSettings() {
            const settingsJson = JSON.stringify(currentSettings, null, 2);
            const blob = new Blob([settingsJson], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            
            const a = document.createElement('a');
            a.href = url;
            a.download = 'readcat-settings.json';
            a.click();
            
            URL.revokeObjectURL(url);
            showNotification('设置已导出', 'success');
            console.log('📤 设置已导出');
        }

        // 导入设置
        function importSettings() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '.json';
            
            input.onchange = function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        try {
                            const settings = JSON.parse(e.target.result);
                            currentSettings = { ...currentSettings, ...settings };
                            applyAllSettings();
                            saveSettings();
                            showNotification('设置已导入', 'success');
                            console.log('📥 设置已导入');
                        } catch (error) {
                            showNotification('导入失败：文件格式错误', 'error');
                            console.error('导入设置失败:', error);
                        }
                    };
                    reader.readAsText(file);
                }
            };
            
            input.click();
        }

        // 重置设置
        function resetSettings() {
            if (confirm('确定要重置所有设置为默认值吗？')) {
                currentSettings = {
                    theme: 'default',
                    fontSize: 16,
                    lineHeight: 1.6,
                    fontFamily: 'Microsoft YaHei',
                    pageMode: 'click',
                    pageAnimation: 'slide',
                    autoPageTurn: false,
                    autoPageSpeed: 5,
                    fullScreen: false,
                    hideInterface: false,
                    readingProgress: true,
                    autoSync: true,
                    syncBookmarks: true
                };
                
                applyAllSettings();
                saveSettings();
                showNotification('设置已重置为默认值', 'success');
                console.log('🔄 设置已重置');
            }
        }

        // 应用所有设置
        function applyAllSettings() {
            // 应用主题
            changeTheme(currentSettings.theme);
            
            // 应用字体设置
            document.getElementById('fontSizeSlider').value = currentSettings.fontSize;
            document.getElementById('fontSizeValue').textContent = currentSettings.fontSize + 'px';
            document.getElementById('readingContent').style.fontSize = currentSettings.fontSize + 'px';
            
            document.getElementById('lineHeightSlider').value = currentSettings.lineHeight;
            document.getElementById('lineHeightValue').textContent = currentSettings.lineHeight;
            document.getElementById('readingContent').style.lineHeight = currentSettings.lineHeight;
            
            document.getElementById('fontFamilySelect').value = currentSettings.fontFamily;
            document.getElementById('readingContent').style.fontFamily = currentSettings.fontFamily;
            
            // 应用翻页设置
            document.querySelector(`input[name="pageMode"][value="${currentSettings.pageMode}"]`).checked = true;
            document.getElementById('pageAnimationSelect').value = currentSettings.pageAnimation;
            
            document.getElementById('autoPageTurn').checked = currentSettings.autoPageTurn;
            document.getElementById('autoPageSpeedSlider').value = currentSettings.autoPageSpeed;
            document.getElementById('autoPageSpeed').textContent = currentSettings.autoPageSpeed;
            document.getElementById('autoPageSpeedSlider').disabled = !currentSettings.autoPageTurn;
            
            // 应用阅读设置
            document.getElementById('fullScreen').checked = currentSettings.fullScreen;
            document.getElementById('hideInterface').checked = currentSettings.hideInterface;
            document.getElementById('readingProgress').checked = currentSettings.readingProgress;
            
            // 应用同步设置
            document.getElementById('autoSync').checked = currentSettings.autoSync;
            document.getElementById('syncBookmarks').checked = currentSettings.syncBookmarks;
        }

        // 保存设置到本地存储
        function saveSettings() {
            localStorage.setItem('readcat-settings', JSON.stringify(currentSettings));
        }

        // 从本地存储加载设置
        function loadSettings() {
            const saved = localStorage.getItem('readcat-settings');
            if (saved) {
                try {
                    currentSettings = { ...currentSettings, ...JSON.parse(saved) };
                } catch (error) {
                    console.error('加载设置失败:', error);
                }
            }
        }

        // 显示通知
        function showNotification(message, type = 'info') {
            // 创建通知元素
            const notification = document.createElement('div');
            notification.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                padding: 15px 20px;
                border-radius: 8px;
                color: white;
                font-weight: 500;
                z-index: 10000;
                opacity: 0;
                transform: translateX(100%);
                transition: all 0.3s ease;
                max-width: 300px;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            `;
            
            // 设置通知类型样式
            const colors = {
                'info': '#667eea',
                'success': '#4CAF50',
                'error': '#f44336',
                'warning': '#ff9800'
            };
            notification.style.background = colors[type] || colors.info;
            notification.textContent = message;
            
            document.body.appendChild(notification);
            
            // 显示动画
            setTimeout(() => {
                notification.style.opacity = '1';
                notification.style.transform = 'translateX(0)';
            }, 100);
            
            // 自动隐藏
            setTimeout(() => {
                notification.style.opacity = '0';
                notification.style.transform = 'translateX(100%)';
                setTimeout(() => {
                    if (notification.parentNode) {
                        notification.parentNode.removeChild(notification);
                    }
                }, 300);
            }, 3000);
        }

        // 初始化
        console.log('🎉 ReadCat 主页面加载完成！');
        console.log('📍 当前页面: http://localhost:8080/readcat-main.html');
        
        // 加载保存的设置
        loadSettings();
        
        // 页面加载完成后应用设置
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(() => {
                applyAllSettings();
                console.log('⚙️ 设置已加载并应用');
            }, 500);
        });
        
        // 欢迎消息
        setTimeout(() => {
            console.log('✨ 欢迎使用 ReadCat 阅读器！');
            showNotification('欢迎使用 ReadCat 阅读器！', 'success');
        }, 1000);
    </script>
</body>
</html>